---
title: "Letter Spacing"
description: "Utilities for controlling the tracking (letter spacing) of an element."
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/letterSpacing'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Usage

Control the letter spacing of an element using the `tracking-{size}` utilities.

```html lightBlue
<template preview>
  <div class="mb-6">
    <p class="mb-1 text-sm text-light-blue-600">.tracking-tighter</p>
    <p class="tracking-tighter text-lg text-light-blue-800">The quick brown fox jumps over the lazy dog.</p>
  </div>
  <div class="mb-6">
    <p class="mb-1 text-sm text-light-blue-600">.tracking-tight</p>
    <p class="tracking-tight text-lg text-light-blue-800">The quick brown fox jumps over the lazy dog.</p>
  </div>
  <div class="mb-6">
    <p class="mb-1 text-sm text-light-blue-600">.tracking-normal</p>
    <p class="tracking-normal text-lg text-light-blue-800">The quick brown fox jumps over the lazy dog.</p>
  </div>
  <div class="mb-6">
    <p class="mb-1 text-sm text-light-blue-600">.tracking-wide</p>
    <p class="tracking-wide text-lg text-light-blue-800">The quick brown fox jumps over the lazy dog.</p>
  </div>
  <div class="mb-6">
    <p class="mb-1 text-sm text-light-blue-600">.tracking-wider</p>
    <p class="tracking-wider text-lg text-light-blue-800">The quick brown fox jumps over the lazy dog.</p>
  </div>
  <div>
    <p class="mb-1 text-sm text-light-blue-600">.tracking-widest</p>
    <p class="tracking-widest text-lg text-light-blue-800">The quick brown fox jumps over the lazy dog.</p>
  </div>
</template>

<p class="**tracking-tighter** ...">The quick brown fox ...</p>
<p class="**tracking-tight** ...">The quick brown fox ...</p>
<p class="**tracking-normal** ...">The quick brown fox ...</p>
<p class="**tracking-wide** ...">The quick brown fox ...</p>
<p class="**tracking-wider** ...">The quick brown fox ...</p>
<p class="**tracking-widest** ...">The quick brown fox ...</p>
```

## Responsive

To control the letter spacing of an element at a specific breakpoint, add a `{screen}:` prefix to any existing letter spacing utility. For example, use `md:tracking-wide` to apply the `tracking-wide` utility at only medium screen sizes and above.

```html
<p class="tracking-tight **md:tracking-wide** ...">The quick brown fox jumps over the lazy dog.</p>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Letter Spacings

By default, Tailwind provides six tracking utilities. You can change, add, or remove these by editing the `theme.letterSpacing` section of your Tailwind config.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      letterSpacing: {
+       tightest: '-.075em',
        tighter: '-.05em',
-       tight: '-.025em',
        normal: '0',
-       wide: '.025em',
        wider: '.05em',
-       widest: '.1em',
+       widest: '.25em',
      }
    }
  }
```

### Variants

<Variants plugin="letterSpacing" name="tracking" />

### Disabling

<Disabling plugin="letterSpacing" name="tracking" />
